<template>
  <div class="Index">
    <el-container>
      <el-header height="100px">
        <el-row :gutter="24" class="top_wrap">
          <el-col :span="2">
            <h1 class="logo"></h1>
          </el-col>
          <el-col :span="18" style="height:100px;padding-left:80px" class="top_nav">
            <el-tabs v-on:tab-click="handleTab" v-model="activeTab">
              <template v-for="tab in menuData">
                <el-tab-pane v-bind:key="tab.mid" v-if="tab.show" v-bind:name="tab.mid">
                  <span slot="label">
                    <i :class="tab.icon"></i>
                    <span>{{tab.mName}}</span>
                  </span>
                </el-tab-pane>
              </template>
            </el-tabs>
          </el-col>
          <el-col :span="4" class="top_right">
            <el-badge :value="newsNum" :max="99" class="item tip_wrap">
              <el-tooltip class="item" effect="light" :content="newsTip" placement="bottom">
                <i class="iconfont icon-jinggao warn_icon" @click="recordJump"></i>
              </el-tooltip>
            </el-badge>
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link outLogin">
                <i class="iconfont icon-touxiang"></i>
                欢迎,{{userInfo.name}}!
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="0">
                  <span @click="handlePassDialog=true">修改密码</span>
                </el-dropdown-item>
                <el-dropdown-item divided command="1">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="205px">
          <el-scrollbar style="height: 100%;">
            <div style="height:964px;">
              <el-menu
                :default-active="defaultActive"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleSelect"
                @select="handleSelect"
                background-color="#0A0b17"
                text-color="#85899c"
                active-text-color="#ffffff"
                :unique-opened="true"
                router
              >
                <transition-group :name="transitionAside">
                  <el-menu-item
                    v-for="nav in navMenu"
                    v-if="navJudge(nav)"
                    v-bind:index="nav.action"
                    v-bind:key="nav.mid"
                  >
                    <i :class="nav.icon"></i>
                    <span slot="title">{{nav.mName}}</span>
                  </el-menu-item>
                  <el-submenu v-else-if="nav.show" v-bind:index="nav.action" v-bind:key="nav.mid">
                    <template slot="title">
                      <i :class="nav.icon"></i>
                      <span slot="title">{{nav.mName}}</span>
                    </template>
                    <el-menu-item
                      v-for="navs in nav.children"
                      v-bind:index="navs.action"
                      v-bind:key="navs.mid"
                    >
                      <i :class="navs.icon"></i>
                      <span slot="title">{{navs.mName}}</span>
                    </el-menu-item>
                  </el-submenu>
                </transition-group>
              </el-menu>
            </div>
          </el-scrollbar>
        </el-aside>
        <el-container>
          <el-scrollbar style="height:100%">
            <transition :name="transitionMain">
              <el-main>
                <router-view v-bind:activeTab="activeTab"></router-view>
              </el-main>
            </transition>
          </el-scrollbar>
          <el-footer>版权©2016 Alinket.自连信息科技有限公司保留所有权利</el-footer>
        </el-container>
      </el-container>
    </el-container>
    <section class="dialogSec" v-bind:class="{'dialogshow':handlePassDialog}">
      <el-form size="mini" label-position="right" :model="passForm">
        <section class="title">
          <h3>修改密码</h3>
          <i class="el-icon-close" @click="handlePassDialog = false"></i>
        </section>
        <div class="wrap">
          <section class="top">
            <el-form-item>
              <el-input v-model="passForm.newPass" placeholder="请输入您的密码">
                <template slot="prepend">新密码</template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="passForm.newPassAgain" placeholder="请确认新密码">
                <template slot="prepend">确认新密码</template>
              </el-input>
            </el-form-item>
          </section>
        </div>
        <section class="foot">
          <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="handlePassDialog = false">取 消</el-button>
            <el-button size="mini" type="primary" @click="modifyPass">确 认 修 改</el-button>
          </div>
        </section>
      </el-form>
    </section>
  </div>
</template>

<script type="text/javascript" src="../api/index.js"></script>

<style lang="scss">
body {
  > .el-dropdown-menu {
    padding: 0px;
    margin: 0px;
    .el-dropdown-menu__item {
      font-size: 12pxx;
      padding: 0 20px;
      color: #606266;
      cursor: pointer;
    }
  }
  > .el-container {
    margin-bottom: 40px;
  }
  .el-container:nth-child(5) .el-aside {
    line-height: 260px;
  }
}

/*左侧菜单选项卡切换*/
.fade-enter-active,
.fade-leave-active {
  position: fixed !important;
  transition: all 0.5s;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
  transform: translateX(-100px);
}
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.5s;
  position: absolute;
  top: 48px;
  right: 0px;
  bottom: 60px;
  left: 200px;
}
.fade-transform-enter {
  opacity: 0;
  transform: translate3d(-30px, 0, 0);
}
.fade-transform-leave-to {
  opacity: 0;
  transform: translate3d(30px, 0, 0);
}

/*主界面菜单*/
.Index {
  > .el-container {
    height: 100vh;
    > .el-header {
      background-color: #1f2e49;
      color: #fff;
      text-align: center;
      line-height: 100px;
      height: 100px;
      > .top_wrap {
        display: flex;
        justify-content: space-around;
        flex-wrap: nowrap;
        .logo {
          height: 100px;
          color: #fff !important;
          font-size: 32px;
          display: flex;
          justify-content: center;
          margin-left: 14px;
          background: url(../assets/imgs/logo.png) no-repeat center/56%;
          background-size:100% 65%;
          width:100%;
          height:100%;
        }
        .top_right {
          display: flex;
          height: 100px;
          .tip_wrap {
            margin-right: 40px;
            line-height: 100px;
          }
          .warn_icon {
            font-size: 30px;
            color: #ffffff;
          }
          .el-dropdown {
            height: 55px;
            line-height: 100px;
            .el-dropdown-link {
              cursor: pointer;
              color: #ffffff;
              i {
                vertical-align: middle;
                font-size: 22px;
              }
            }
          }
        }
        .top_nav {
          .el-tabs {
            display: flex;
            justify-content: flex-start;
            height: 100px;
            .el-tabs__item {
              height: 100px;
              padding: 0 10px;
              color: #989ca6;
              font-size: 2rem;
              line-height: 100px;
              width: 135px;
              span {
                i {
                  margin-top: -19px;
                  display: block;
                  font-size: 2em;
                  color: #9da4af;
                }
                span {
                  margin-top: -57px;
                  display: block;
                }
              }
            }
            // .el-tabs__item {
            //   &:nth-child(2) {
            //     margin-left: 67px;
            //   }
            // }
            .el-tabs__active-bar {
              position: relative;
              background-color: #2b324c !important;
              height: 0px;
            }
            .el-tabs__header {
              margin: 0 0 0px;
              width: 100%;
            }
            .el-tabs__nav {
              height: 100px;
              width: 200px;
            }
          }

          .el-tabs__item.is-active {
            background-color: #161836;
          }

          .el-tabs__item.is-active span,
          .el-tabs__item.is-active span i {
            color: #44abf5;
          }
          .el-tabs__nav-wrap::after {
            background-color: #2b324c;
          }
        }
      }
    }
    > .el-container {
      .el-aside {
        background-color: #0a0b17;
        color: #333;
        text-align: center;
        line-height: 200px;
        .el-scrollbar__wrap {
          background-color: #0a0b17;
          .el-menu {
            border: none;
            .el-menu-item {
              color: #fff;
              font-size: 2rem;
              text-align: center;
              height: 60px;
              line-height: 60px;
              margin-left: -37px;
              border-bottom: 1px solid #727785;
            }
            .el-menu-item.is-active {
              //background-color: #161836 !important;
              font-weight: bold;
              //border-right: 5px solid #fff
            }
            li {
              &:nth-child(1) {
                margin-top: 40px;
              }
            }
            .el-submenu {
              .el-submenu__title {
                border-bottom: 1px solid #727785;
                margin-left: -37px;
                font-size: 2rem;
                height: 60px;
                line-height: 60px;
              }
              .el-menu {
                margin-left: 17%;
                .el-menu-item {
                  border-bottom: 1px solid #727785;
                  margin-top: 0px;
                }
              }
            }
          }
        }
      }
    }
  }
  .el-footer {
    background-color: #1f2e49;
    color: #fff;
    text-align: center;
    line-height: 40px !important;
    height: 40px !important;
    position: absolute;
    width: 100%;
    bottom: 0;
    padding-right: 300px;
    z-index: 1;
    font-size: 1em;
  }
  .el-scrollbar {
    .el-scrollbar__wrap {
      overflow-x: hidden;
      background-color: #161836;
      height: 96%;
      .el-main {
        color: #ffffff;
        padding-right: 20px;
      }
      .el-scrollbar__view {
        height: 0px;
      }
    }
  }

  .el-badge__content.is-fixed {
    top: 38px;
  }

  .dialogSec {
    .el-form {
      .wrap {
        .top {
          .el-form-item {
            .el-input-group__prepend {
              background-color: #161836;
              border: 1px solid #85899c;
              color: #85899c;
            }
          }
        }
      }
      .foot {
        .el-button--default {
          background-color: #161836;
          font-size: 14px;
          padding: 8px 16px;
          color: #85899c;
          border: 1px solid #85899c;
        }
        .el-button--default:hover,
        .el-button--default:focus {
          background-color: #161836;
          font-size: 14px;
          padding: 8px 16px;
          color: #fff;
          border: 1px solid #fff;
        }
        .el-button--primary {
          padding: 8px 16px;
          font-size: 14px;
          background-color: #44abf5;
          border: 1px solid #44abf5;
          color: #fff;
        }
      }
    }
  }
}
</style>
